<template>
  <div class="content">
    <div class="filter-wrap">
      <div class="box-flex">
        <div class="flex">
          <zx-form-group :title="$t('CURRENCY')">
            <zx-select :place="$t('CURRENCY_PLACE')" v-model="coinNo" class="boxShadow">
              <zx-option value="0">QC</zx-option>
              <zx-option value="40">USDT</zx-option>
            </zx-select>
          </zx-form-group>
        </div>
        <div class="flex">
          <zx-form-group :title="$t('TYPE')">
            <zx-select :place="$t('TYPE_PALCE')" v-model="type" class="boxShadow">
              <zx-option value="">{{'ALL'|t}}</zx-option>
              <zx-option value="0">{{'BUY'|t}}</zx-option>
              <zx-option value="1">{{'SELL'|t}}</zx-option>
            </zx-select>
          </zx-form-group>
        </div>
      </div>
    </div>
    <ul class="record-list">
      <li class="record-item boxShadow" v-for="(item,key) of recordList" :key='key'>
        <div class="item-top box-flex space-between border-b">
          <h3 class="top-title" :class="item.tradeType==1?'':'c-red'">
            <i class="icon" :class="item.tradeType=='1'?'icon-recharge':'icon-withdraw'"></i>
            {{item.tradeTypes|t}}</h3>
          <span>{{item.beginDate|Format}}</span>
        </div>
        <div class="item-desc">
          <div class="box-flex space-between item-info ">
            <span>{{'CURRENCY'|t}}：</span>
            <span class="c-primary">{{item.coinType}}</span>
          </div>
          <div class="box-flex space-between item-info ">
            <span>{{'TYPE'|t}}：</span>
            <span>{{item.tradeTypes|t}}</span>
          </div>
          <div class="box-flex space-between item-info">
            <span>{{'STATUS'|t}}：</span>
            <span :class="item.state=='1'?'c-success':item.state=='2'?'c-fail':'c-red'">{{item.states|t}}</span>
          </div>
          <div class="box-flex space-between item-info">
            <span>{{'VOLUME_OF_TRANSACTION'|t}}：</span>
            <span>{{item.tradeNumber}}</span>
          </div>
          <div class="box-flex space-between item-info ">
            <span>{{'PAYMENT_METHOD'|t}}：</span>
            <span>{{item.payName}}</span>
          </div>
          <div class="box-flex space-between item-info ">
            <span>{{'ACCOUNT_ACCOUNT'|t}}：</span>
            <span>{{item.payNumber}}</span>
          </div>
          <div class="box-flex space-between item-info">
            <span>{{'ORDER_NUMBER'|t}}：</span>
            <span>{{item.tradeId}}</span>
          </div>
        </div>
      </li>
    </ul>
    <zx-no-data v-model='showNoDataBool'></zx-no-data>
    <div v-infinite-scroll="GetByUser" infinite-scroll-disabled="loading" infinite-scroll-distance="10"></div>
  </div>
</template>
<script>
  import { Form, Func, Auth } from '@/providers';
  import { C2c } from '@/services';
  export default {
    data() {
      return {
        coinNo: '40',
        type: '',
        pageNumber: 1,
        pageSize: 10,
        showNoDataBool: false,
        loading: false,
        recordList: []
      };
    },
    methods: {
      changevalue(value) {
      },
      getData() {
        this.GetByUser();
      },
      async GetByUser() {
        if (this.loading) { return false; };
        this.loading = true;
        try {
          let res = await C2c.GetByUser({
            tradeType: this.type,
            coinType: this.coinNo,
            pageNum: this.pageNumber,
            pageSize: this.pageSize,
            state: '',
            category: '', // 1、充值；2、提现；3、c2c；4、币币；5、货币兑换，传空值默认全部
            userNo: Auth.getItem('userId'),
            startTime: '',
            endTime: '',
            token: Auth.getItem('token')
          });
          let tradeTypeMap = new Map();
          let coinTypeMap = new Map();
          let stateMap = new Map();
          stateMap.set(0, 'UNTREATED').set(1, 'SUCCESS').set(2, 'FAILT');
          tradeTypeMap.set(0, 'BUY').set(1, 'SELL');
          coinTypeMap.set(0, 'QC').set(40, 'USDT');
          for (let item of res.data.ctoInfos) {
            item.states = stateMap.get(item.state);
            item.coinType = coinTypeMap.get(item.coinType);
            item.tradeTypes = tradeTypeMap.get(item.tradeType);
          }
          this.recordList = [...this.recordList, ...res.data.ctoInfos];
          if (res.data.ctoInfos.length >= 10) {
            this.loading = false;
          }
          this.pageNumber++;
          // 判断size
          this.showNoDataBool = res.data.count == 0 ? true : false;
        } catch (error) {
          console.log(error);
        }
      }
    },
    watch: {
      'coinNo'(val) {
        this.recordList = [];
        this.pageNumber = 1;
        this.loading = false;
        this.GetByUser();
      },
      'type'(val) {
        this.recordList = [];
        this.pageNumber = 1;
        this.loading = false;
        this.GetByUser();
      }
    },
    created() {
      this.getData();
    }
  };
</script>
<style lang="scss" scoped>
  @import "../../assets/sass/asset.scss";
</style>